<script setup lang="ts">
import {
  Flex,
  Table,
  InputSearch,
  Button,
  TableColumnsType,
} from "ant-design-vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import { onMounted, reactive, ref, h } from "vue";
import { MusicInfoOutput, Service } from "../api";
import AddMusicToPlaylistModal from "./AddMusicToPlaylistModal.vue";
import MusicDetailDrawer from "./MusicDetailDrawer.vue";
import UploadMusicModal from "./UploadMusicModal.vue";
import { getDurationText } from "../utils";
import { useStore } from "../stores";
const store = useStore();
const query = reactive({
  keyword: "",
  page: 1,
  size: 10,
});
const total = ref(0);
const dataSource = ref<MusicInfoOutput[]>([]);
const coloums: TableColumnsType = [
  {
    title: "序号",
    key: "index",
    width: 60,
    customRender: ({ index }: any) => {
      const page = query.page;
      const size = query.size;
      return `${(page - 1) * size + index + 1}`;
    },
  },
  {
    title: "音乐标题",
    dataIndex: "title",
    ellipsis: true,
  },
  {
    title: "艺术家",
    dataIndex: "artist",
    ellipsis: true,
    width: 150,
  },
  {
    title: "专辑",
    dataIndex: "album",
    ellipsis: true,
    width: 150,
  },
  {
    title: "时长",
    dataIndex: "duration",
    width: 100,
    align: "right",
  },
  {
    title: "操作",
    key: "operation",
    width: 250,
    align: "right",
  },
];

const loading = ref<boolean>(false);
const onSearch = async () => {
  query.page = 1;
  loadData();
};

const loadData = async () => {
  loading.value = true;
  try {
    const result = await Service.findAllMusicInfo(query);
    total.value = result.totalElements;
    dataSource.value = result.data;
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const selectedMusic = ref<MusicInfoOutput>();

const addMusicToPlaylistModalOpen = ref(false);
const addPlayList = (record: MusicInfoOutput) => {
  selectedMusic.value = record;
  addMusicToPlaylistModalOpen.value = true;
};

const insertPlayer = (record: MusicInfoOutput) => {
  store.insertPlayer(record);
};

const musicDetailDrawerOpen = ref(false);
const openMusicDetailDrawer = (record: MusicInfoOutput) => {
  selectedMusic.value = record;
  musicDetailDrawerOpen.value = true;
};

const uploadMusicModalOpen = ref(false);
onMounted(() => {
  loadData();
});
</script>

<template>
  <Flex vertical>
    <div style="padding: 10px 20px">
      <InputSearch
        v-model:value="query.keyword"
        placeholder="输入关键字进行搜索"
        size="large"
        @search="onSearch"
      >
        <template #enterButton>
          <Button type="primary">搜索</Button>
        </template>
      </InputSearch>
    </div>
    <div v-if="store.userInfo != undefined" style="padding: 5px 20px">
      <Button
        type="primary"
        :icon="h(UploadOutlined)"
        @click="uploadMusicModalOpen = true"
        >上传音乐</Button
      >
    </div>
    <Table :columns="coloums" :data-source="dataSource" :loading="loading">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'duration'">
          {{ getDurationText(record.duration) }}
        </template>
        <template v-if="column.key === 'operation'">
          <Button
            type="link"
            size="small"
            @click="()=>openMusicDetailDrawer(record as MusicInfoOutput)"
            >详情</Button
          >
          <Button
            type="link"
            size="small"
            @click="()=>insertPlayer(record as MusicInfoOutput)"
            >插播</Button
          >
          <Button
            type="link"
            size="small"
            @click="addPlayList(record as MusicInfoOutput)"
            >添加到歌单</Button
          >
        </template>
      </template>
    </Table>
  </Flex>
  <AddMusicToPlaylistModal
    v-if="selectedMusic"
    v-model:open="addMusicToPlaylistModalOpen"
    :music-id="selectedMusic.id"
  ></AddMusicToPlaylistModal>
  <MusicDetailDrawer
    v-if="selectedMusic"
    v-model:open="musicDetailDrawerOpen"
    :music-info="selectedMusic"
  ></MusicDetailDrawer>
  <UploadMusicModal
    v-model:open="uploadMusicModalOpen"
    @finish="loadData"
  ></UploadMusicModal>
</template>
